<template>
  <div class="page-layout MBT-20">
    <notice-bar></notice-bar>

    <exam-information-box></exam-information-box>

    <div class="MTR-50">
      <class-selector></class-selector>
    </div>

    <div class="MTR-50">
      <nav-selector :active="navActive" @click="handleNavChange" :list="navList"></nav-selector>
    </div>

    <div class="MTR-10">
      <overall-situation></overall-situation>
    </div>

    <div class="overallView" v-if="navActive === '试卷总览'">

      <div class="MTR-30">
        <card>
          <div class="progress-infoBox">
            <div class="progress-infoBox-left">
              <num-info-box assist="45" main="30" title="提交进度(人)"></num-info-box>
            </div>
            <div class="progress-infoBox-right">
              <text-info-box title="班级得分率">
                <span class="nums num_green">75.6 <span class="nums-flag">%</span></span>
              </text-info-box>
            </div>
          </div>
        </card>
      </div>

      <div class="MTR-30">
        <card >
          <scoreProgress />
        </card>
      </div>

      <div class="MTR-30">
        <card padding="35rpx 30rpx">
          <info-box title="成绩分布" img="/static/images/zhexiantu@2x.png">
            <div class="warp">
              <columnChart id="bar"></columnChart>
            </div>
          </info-box>

          <info-box title="低分试题" img="/static/images/difenshiti@2x.png">
            <test-progress-list></test-progress-list>
          </info-box>

          <div class="MTR-40">
            <info-box title="考试分析" img="/static/images/kaishifenxi@2x.png">
              <radarChart></radarChart>
            </info-box>
          </div>

        </card>
      </div>

      <div class="MTR-30">
        <card padding="35rpx 30rpx">
          <info-text-box title="总分">
            <div class="total-col">
              <div class="total-col-item">
                <num-info-box size="small" assist="150" main="139.5" title="最高分"></num-info-box>
              </div>
              <div class="total-col-item">
                <num-info-box size="small" assist="150" main="120.4" title="平均分"></num-info-box>
              </div>
              <div class="total-col-item">
                <text-info-box title="得分率">
                  <span class="nums num_blue">80%</span>
                </text-info-box>
              </div>
            </div>
            <div class="warp">
              <columnChart id="total"></columnChart>
            </div>
            <div class="MTR-20">
              <i-table></i-table>
            </div>
          </info-text-box>
        </card>
      </div>

      <div class="MTR-30">
        <card padding="35rpx 30rpx">
          <info-text-box title="听力">
            <div class="total-col">
              <div class="total-col-item">
                <num-info-box size="small" assist="150" main="139.5" title="最高分"></num-info-box>
              </div>
              <div class="total-col-item">
                <num-info-box size="small" assist="150" main="120.4" title="平均分"></num-info-box>
              </div>
              <div class="total-col-item">
                <text-info-box title="得分率">
                  <span class="nums num_blue">80%</span>
                </text-info-box>
              </div>
            </div>
            <div class="warp">
              <columnChart id="listen"></columnChart>
            </div>
            <div class="MTR-20">
              <i-table></i-table>
            </div>
          </info-text-box>
        </card>
      </div>

      <div class="MTR-30">
        <card padding="35rpx 30rpx">
          <info-text-box title="完形填空">
            <div class="total-col">
              <div class="total-col-item">
                <num-info-box size="small" assist="150" main="139.5" title="最高分"></num-info-box>
              </div>
              <div class="total-col-item">
                <num-info-box size="small" assist="150" main="120.4" title="平均分"></num-info-box>
              </div>
              <div class="total-col-item">
                <text-info-box title="得分率">
                  <span class="nums num_blue">80%</span>
                </text-info-box>
              </div>
            </div>
            <div class="warp">
              <columnChart id="blank"></columnChart>
            </div>
            <div class="MTR-20">
              <i-table></i-table>
            </div>
          </info-text-box>
        </card>
      </div>

    </div>

    <div class="analysis-part" v-if="navActive === '试题分析'">

      <analysis-topic chartid="zh" :index="1" :type="1"></analysis-topic>

      <analysis-topic chartid="math" :index="2" :type="2"  :topic="{
          title: 'There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.',
          list: [],
          answer: ''
      }">
      </analysis-topic>

      <analysis-topic chartid="eng" :index="3" :type="3"></analysis-topic>

    </div>

  </div>

</template>

<script>
  import noticeBar from '../../components/noticeBar'
  import examInformationBox from './examInformationBox'
  import classSelector from './classSelector'
  import navSelector from './navSelector'
  import overallSituation from './overallSituation'
  import card from '../../components/card'
  import numInfoBox from '../../components/numInfoBox'
  import textInfoBox from '../../components/textInfoBox'
  import infoBox from '../../components/infoBox'
  import radarChart from './radarChart'
  import columnChart from './columnChart'
  import infoTextBox from '../../components/infoTextBox'
  import table from './classTable'
  import analysisTopic from './analysisTopic'
  import scoreProgress from './scoreProgress'
  import testProgressList from './testProgressList'
  import circleProcess from '../../components/circleProcess'

  export default {
    data () {
      return {
        navList: ['试卷总览', '试题分析', '成绩单', '学生报告'],
        navActive: '试卷总览'
      }
    },

    components: {
      textInfoBox,
      noticeBar,
      examInformationBox,
      classSelector,
      navSelector,
      overallSituation,
      card,
      numInfoBox,
      infoBox,
      radarChart,
      columnChart,
      infoTextBox,
      'i-table': table,
      analysisTopic,
      scoreProgress,
      testProgressList,
      circleProcess
    },

    methods: {
      handleNavChange (item) {
        console.log(item)
        this.navActive = item
      }
    },

    created () {
      // let app = getApp()
    }
  }
</script>

<style scoped>
  .progress-infoBox {
    width: 100%;
    display: flex;
    position: relative;
  }

  .progress-infoBox-left {
    width: 50%;
    height: 122rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .progress-infoBox-left::after {
    content: " ";
    height: 72rpx;
    width: 1px;
    background: rgba(218, 215, 230, 1);
    right: 0;
    position: absolute;
    top: 27rpx;
  }

  .progress-infoBox-right {
    width: 50%;
    height: 122rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .nums {
    font-size: 40rpx;
  }

  .num_green {
    color: rgba(0, 178, 60, 1);
  }

  .num_blue {
    color: rgba(51, 170, 255, 1);
  }

  .nums-flag {
    font-size: 24rpx;
  }

  .total-col {
    width: 100%;
    display: flex;
    position: relative;
  }

  .total-col-item {
    flex: 1;
    position: relative;
  }

  .total-col-item::after {
    content: " ";
    height: 36rpx;
    width: 1px;
    background: rgba(218, 215, 230, 1);
    right: 0;
    position: absolute;
    top: 27rpx;
  }

  .total-col-item:last-child::after {
    content: "";
    height: 36rpx;
    width: 1px;
    background: #fff;
    right: 0;
    position: absolute;
    top: 27rpx;
  }

  .warp {
    height: 480rpx;
  }
</style>
